/* ---- global styles ---- */

body,
html {
  padding: 0;
  margin: 0;
  background: #e6eefb;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: 'Barlow', Helvetica, Arial, sans-serif;
}

#app {
  font-family: 'Barlow', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: white;
}

h1,
h2,
h3,
h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

p,
li {
  font-family: 'Barlow', sans-serif;
}

/* Reset `button` and button-style `input` default styles */
input[type='submit'],
input[type='reset'],
input[type='button'],
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button; /* for input */
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  padding: 10px 30px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 1000px;
  cursor: pointer;
  background: white;
  color: #3e64ea;
  border: 1px solid #3e64ea;
  font-family: 'Barlow', sans-serif;
  text-transform: uppercase;
  margin: 10px;
  transition: 0.15s all ease-out;
}

button:hover {
  background: #3e64ea;
  color: white;
  transition: 0.2s all ease-in;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.capsule {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

input[type='email'] {
  line-height: 24px;
  font-family: Helvetica Neue;
  font-size: 16px;
  height: 24px;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input:-moz-placeholder {
  color: #aab8c3;
}

/* ---- items layout ---- */

/* no grid support */
aside {
  float: left;
  width: 19.1489%;
}

.content {
  /*no grid support*/
  float: right;
  width: 79.7872%;
  /* grid */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 0 !important;
}

@supports (display: grid) {
  .capsule > * {
    width: auto;
    margin: 0;
  }
}

/* --- items animation --- */

.items-leave-active {
  transition: all 0.2s ease-in;
}

.items-move {
  transition: all 0.2s ease-in-out;
}

.items-enter-active {
  transition: all 0.2s ease-out;
}

.items-enter,
.items-leave-to {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 50% 50%;
}

/* --- fade animation --- */

.fade-leave-active {
  transition: all 0.2s ease-in;
}

.fade-enter-active {
  transition: all 0.2s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* --- range --- */

input[type='range'].slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 25px 0 5px;
}

input[type='range'].slider:focus {
  outline: none;
}

input[type='range'].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #3e64ea;
  border-radius: 13.7px;
  border: 0px solid rgba(1, 1, 1, 0);
}

input[type='range'].slider::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 62, 0), 0px 0px 0px rgba(0, 0, 88, 0);
  border: 1.9px solid #3e63ea;
  height: 17px;
  width: 17px;
  border-radius: 31px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.35px;
}

input[type='range'].slider:focus::-webkit-slider-runnable-track {
  background: #5576ed;
}

input[type='range'].slider::-moz-range-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #3e64ea;
  border-radius: 13.7px;
  border: 0px solid rgba(1, 1, 1, 0);
}

input[type='range'].slider::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 62, 0), 0px 0px 0px rgba(0, 0, 88, 0);
  border: 1.9px solid #3e63ea;
  height: 17px;
  width: 17px;
  border-radius: 31px;
  background: #ffffff;
  cursor: pointer;
}

input[type='range'].slider::-ms-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type='range'].slider::-ms-fill-lower {
  background: #2752e7;
  border: 0px solid rgba(1, 1, 1, 0);
  border-radius: 27.4px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type='range'].slider::-ms-fill-upper {
  background: #3e64ea;
  border: 0px solid rgba(1, 1, 1, 0);
  border-radius: 27.4px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type='range'].slider::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 62, 0), 0px 0px 0px rgba(0, 0, 88, 0);
  border: 1.9px solid #3e63ea;
  height: 17px;
  width: 17px;
  border-radius: 31px;
  background: #ffffff;
  cursor: pointer;
  height: 4.3px;
}

input[type='range'].slider:focus::-ms-fill-lower {
  background: #3e64ea;
}

input[type='range'].slider:focus::-ms-fill-upper {
  background: #5576ed;
}

/* ---- media queries ---- */

/* check out how little code this is I love you gridddddddddddd ❤️ */

@media (max-width: 600px) {
  aside {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .content {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  nav li {
    padding: 0 10px !important;
  }

  nav .capsule {
    justify-content: space-around !important;
  }

  .cartitems {
    padding: 30px 0 !important;
    width: 350px !important;
  }

  .payment {
    width: 350px !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
